<template>
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="200px">
      <div class="aside-header">
        <h2 class="aside-title">优驾租管一体化平台</h2>
      </div>
      <el-menu
          active-text-color="#ffd04b"
          background-color="#1c83e1"
      text-color="#e6f3ff"
      router
      >
      <!-- 用户管理 -->
      <el-menu-item index="/admin/user/list">
        <el-icon><UserFilled /></el-icon>
        <span>用户管理</span>
      </el-menu-item>

      <!-- 商家管理 -->
      <el-sub-menu index="merchant">
        <template #title>
          <el-icon><Shop /></el-icon>
          <span>商家管理</span>
        </template>
        <el-menu-item index="/admin/merchant/pending">
          <el-icon><DocumentChecked /></el-icon>
          <span>注册商家审核</span>
        </el-menu-item>
        <el-menu-item index="/admin/merchant/approved">
          <el-icon><Management /></el-icon>
          <span>合格商家管理</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 订单管理 -->
      <el-menu-item index="/admin/order/list">
        <el-icon><Document /></el-icon>
        <span>订单管理</span>
      </el-menu-item>

      <!-- 系统信息统计 -->
      <el-menu-item index="/admin/statistics">
        <el-icon><Money /></el-icon>
        <span>信息统计</span>
      </el-menu-item>

      <!-- 个人中心 -->
      <el-sub-menu index="profile">
        <template #title>
          <el-icon><User /></el-icon>
          <span>个人中心</span>
        </template>
        <el-menu-item index="/admin/resetPassword">
          <el-icon><EditPen /></el-icon>
          <span>重置密码</span>
        </el-menu-item>
      </el-sub-menu>
      </el-menu>
    </el-aside>

    <!-- 右侧主区域 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <div>欢迎：<strong>{{ userInfoStore.userInfo.username }}</strong></div>
        <el-dropdown placement="bottom-end" @command="handleCommand">
          <span class="el-dropdown__box">
            <el-avatar :src="userInfoStore.userInfo.avatar || avatar" />
            <el-icon><CaretBottom /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
              <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <!-- 中间区域 -->
      <el-main>
        <router-view />
      </el-main>

      <!-- 底部区域 -->
      <el-footer><strong>优驾租管一体化平台-管理员端 ©2025</strong></el-footer>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  CaretBottom,
  EditPen,
  Management,
  Money,
  Promotion,
  SwitchButton,
  User,
  UserFilled,
  Shop,
  Document,
  DocumentChecked
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
import { userInfoService } from '@/api/user'
import { useUserInfoStore } from '@/stores/userInfo'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const userInfoStore = useUserInfoStore()
const router = useRouter()

// 获取用户信息
const getUserInfo = async () => {
  try {
    const res = await userInfoService()
    if (res.data.username === '模拟用户') {
      router.push('/login')
    } else {
      userInfoStore.setUserInfo(res.data)
    }
  } catch (error) {
    ElMessage.error('获取用户信息失败，请重新登录')
    router.push('/login')
  }
}

onMounted(() => {
  getUserInfo()
})

// 处理下拉菜单命令
const handleCommand = (command) => {
  if (command === 'logout') {
    ElMessageBox.confirm('你确认要退出吗？', '温馨提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      userInfoStore.removeUserInfo()
      ElMessage.success('退出成功')
      await router.push('/login')
    })
  } else {
    router.push(`/admin/${command}`)
  }
}
</script>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  overflow: hidden;
  --aside-width: 200px;
  --header-height: 60px;
  --footer-height: 50px;
  --menu-item-height: 50px;
  --aside-bg: #1c83e1;         /* 天蓝色主背景 */
  --aside-hover: rgba(255, 255, 255, 0.15);
  --aside-active: rgba(255, 208, 75, 0.25);
  --text-color: #e6f3ff;       /* 浅蓝文字 */
  --border-color: #469cec;     /* 蓝色边框 */
}

/* 左侧导航区域 */
.el-aside {
  background-color: var(--aside-bg);
  border-right: 1px solid var(--border-color);
  width: var(--aside-width);

  .aside-header {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);

    .aside-title {
      color: #ffffff; /* 标题白色更醒目 */
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }

  .el-menu {
    border-right: none;

    .el-menu-item,
    .el-sub-menu__title {
      height: var(--menu-item-height);
      line-height: var(--menu-item-height);
      padding: 0 20px !important;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
      color: var(--text-color);

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        background-color: var(--aside-hover);
        transition: width 0.3s;
      }

      &:hover {
        &::before {
          width: 100%;
        }
        color: #ffd04b;
      }

      .el-icon {
        margin-right: 10px;
        width: 20px;
        text-align: center;
      }
    }

    .el-menu-item.is-active {
      background-color: var(--aside-active);
      border-left: 3px solid #ffd04b;
      color: #ffd04b;
    }
  }
}

/* 头部区域 */
.el-header {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: var(--header-height);
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  > div:first-child {
    color: #333;
    font-size: 14px;

    strong {
      color: #232323;
      margin-left: 5px;
    }
  }

  .el-dropdown__box {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
      background-color: #f5f5f5;
    }

    .el-avatar {
      width: 36px;
      height: 36px;
      border: 1px solid #eee;
    }

    .el-icon {
      color: #999;
      margin-left: 10px;
      font-size: 16px;
    }

    &:active,
    &:focus {
      outline: none;
    }
  }
}

/* 主内容区域 */
.el-main {
  padding: 20px;
  background-color: #f5f7fa;
  height: calc(100vh - var(--header-height) - var(--footer-height));
  overflow-y: auto;
}

/* 底部区域 */
.el-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #666;
  border-top: 1px solid #eee;
  height: var(--footer-height) !important;
  background-color: #fff;
}
</style>